<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <style>
        body {
            background: #ffffff;
        }

        #box {
            background: #ffffff;
            height: 106px;
            width: 100%;
            position: fixed;
            left: 0;
            bottom: -106px;
            -webkit-transform: translate3d(0px, -106px, 0px);
            -moz-transform: translate3d(0px, -106px, 0px);
            transform: translate3d(0px, -106px, 0px);
            transition: all 0.3s;
            visibility: hidden;
        }

        #box a {
            display: block;
            width: 100%;
            text-align: center;
            height: 40px;
            background: #fff;
            color: #333;
            line-height: 40px;
            border-bottom: 1px solid #ebebeb;
            font-size: 16px;
            position: relative;
            margin-bottom: 6px;
        }

        .btn {
            margin-top: 0.1 rem;
            margin-bottom: 2rem;
            text-align: center
        }

        .btn button {
            width: 90%;
            outline: none;
            border: none;
            background: #009bdb;
            color: #fff;
            height: 40px;
            display: inline-block;
            border-radius: 0.4 rem;
            font-size: 16px;
        }

        body {
            background: #ffffff;
        }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav aui-bar-light">
        <a class="aui-pull-left aui-btn"> <span class="aui-iconfont aui-icon-menu"></span> </a>
        <div class="aui-title">
            头像上传
        </div>
        <a class="aui-pull-right aui-btn"> <span class="aui-iconfont aui-icon-camera"></span> </a>
    </header>
    <!-- 进度条-->
    <div class="aui-progress aui-progress-xxs" style="margin-bottom: 1rem">
        <div class="aui-progress-bar" id="jd"></div>
    </div>
    <!-- 头像显示区域-->
    <div class="aui-card-list">
        <div class="aui-card-list-content" id="tx" style="padding: 2rem">
            <img src="../res/01.jpg" />
        </div>
    </div>
    <!-- 操作按钮-->
    <div id="box">
        <a>操 作</a>
        <div class="btn">
            <button>
                                        截取头像
                                </button>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.setStatusBarStyle({
            style: 'light',
            color: '#000'
        });
        api.parseTapmode();
        $api.fixStatusBar($api.dom('header'));
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            api.toast({
                msg: '再点一次退出应用',
                duration: 2000,
                location: 'bottom'
            });
            api.addEventListener({
                name: 'keyback'
            }, function(ret, err) {
                api.closeWidget({
                    silent: true
                });
            });
            setTimeout(function() {}, 3000)
        });
    };

    function upimg() {
      console.info(1);
        api.actionSheet({
            title: '上传照片',
            cancelTitle: '取消',
            buttons: ['拍照', '手机相册']
        }, function(ret, err) {
            if (ret) {
                getPicture();
            }
        });
    }


    function getPicture() {
            api.getPicture({
                encodingType: 'jpg',
                mediaValue: 'pic',
                allowEdit: true,
                quality: 100,
                saveToPhotoAlbum: false
            }, function(ret, err) {
              console.info(ret.data);
            });
    }


    //保存剪辑图像
    function save() {
        var FNImageClip = api.require('FNImageClip');
        var nubs = nub(1000, 3000);
        FNImageClip.save({
            destPath: 'fs://tx_' + nubs + '.jpg',
            copyToAlbum: false,
            quality: 1
        }, function(ret, err) {
            $api.byId('box').style.visibility = 'hidden';
            var tx = ret.destPath;
            FNImageClip.close();
            //上传剪辑后的图像到服务器
            api.ajax({
                report: true,
                url: 'http://nfyx.cn/app/up_img.php',
                method: 'post',
                cache: 'false',
                timeout: 30,
                dataTpye: 'json',
                data: {
                    files: {
                        file: tx
                    }
                }
            }, function(ret, err) {
                var b0 = ret.progress;
                $api.byId('jd').style.width = b0 + '%';
                //上传进度
                if (ret.body.ok == 0) {
                    api.toast({
                        msg: '上传错误',
                        duration: 3000,
                        location: 'bottom'
                    });
                } else if (ret.body.ok == 1) {
                    $api.byId('tx').innerHTML = '<img src="http://nfyx.cn/app/img/' + ret.body.name + '">';
                    api.toast({
                        msg: '上传成功',
                        duration: 3000,
                        location: 'bottom'
                    });
                } else if (ret.body.ok == 2) {
                    api.toast({
                        msg: '图像无效',
                        duration: 3000,
                        location: 'bottom'
                    });
                }
            });
        });
    }


    function nub(minNum, maxNum) {
        switch (arguments.length) {
            case 1:
                return parseInt(Math.random() * minNum + 1);
                break;
            case 2:
                return parseInt(Math.random() * (maxNum - minNum + 1) + minNum);
                break;
            default:
                return 0;
                break;
        }
    }
</script>

</html>
